<template>
    <div class="admin-settings">
        <h2 style="color: white;">管理员设置</h2>
        <a-form @submit.prevent="handleSubmit" layout="vertical">
            <a-form-item class="input-lable">
                <label>修改账户名</label>
                <a-input v-model:value="username" placeholder="请输入新的账户名" />
            </a-form-item>
            <a-form-item class="input-lable">
                <label>修改密码</label>
                <a-input-password v-model:value="password" placeholder="请输入新的密码" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">保存设置</a-button>
                <a-button danger @click="handleLogout" style="margin-left: 16px;">退出登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import request from '../../util/request';

export default {
    name: 'AdminInfoEditor',
    setup() {
        const router = useRouter();
        //const message = useMessage();

        const username = ref('');
        const password = ref('');

        onMounted(() => {
            request.post('/account/get', {
                userid: sessionStorage.getItem('userid'),
                role: 'admin',
            }).then(res => {
                username.value = res.data.username;
            }).catch(error => {
                message.error('获取账户信息失败:', error);
            });
        });
        // username.value = 'admin';
        // password.value = 'admin';

        const handleSubmit = async () => {
            request.post('/account/edit', {
                userid: sessionStorage.getItem('userid'),
                username: username.value,
                password: password.value,
                role: 'admin',
            }).then(res => {
                if(res.data.flag === 'success') {
                    message.success('修改成功');
                } else {
                    message.error('修改失败');
                }
            }).catch(error => {
                message.error('修改失败:', error);
            });
        };

        const handleLogout = () => {
            sessionStorage.removeItem('userid');
            sessionStorage.removeItem('role');
            message.success('已退出登录');
            router.push('/');
        };

        return {
            username,
            password,
            handleSubmit,
            handleLogout,
        };
    },
};
</script>

<style scoped>
.admin-settings {
    padding: 24px;
    background: #1a1a1a;
    /* 暗色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    /* 字体颜色为白色 */
}


.input-lable label {
    font-size: 16px;
    color: #ffffff;
}

a-form-item {
    margin-bottom: 16px;
}
</style>